<template>
  <el-card class="home_table">
    <!-- 查询内容 -->
    <div slot="header" class="clearfix">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="记录编号">
          <el-input
            v-model="formInline.recordNumber"
            placeholder="记录编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员名称">
          <el-input
            v-model="formInline.personNumber"
            placeholder="人员名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.times"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            icon="el-icon-search"
            style="background-color: rgba(26, 179, 148); border: none"
            >查询</el-button
          >
        </el-form-item>
        <!-- 刷新 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="reset"
            icon="el-icon-refresh"
            style="background-color: rgba(247, 165, 74); border: none"
            >刷新</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div style="height: calc(100vh - 190px); background: '#587ab3'">
      <el-table
        :data="tableData"
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          textAlign: 'center',
          background: '#587ab3',
          color: '#ffffff',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mainProductName"
          show-overflow-tooltip
          label="主齿号"
        ></el-table-column>
        <el-table-column
          prop="subProductName"
          show-overflow-tooltip
          label="被齿号"
        ></el-table-column>
        <el-table-column
          prop="ProductName"
          show-overflow-tooltip
          label="产品名称"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="customer"
          show-overflow-tooltip
          label="客户"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="personNumber"
          show-overflow-tooltip
          label="工号"
        ></el-table-column>
        <el-table-column
          prop="personName"
          show-overflow-tooltip
          label="人员名称"
        ></el-table-column>
        <el-table-column
          prop="workstation"
          show-overflow-tooltip
          label="工序"
        ></el-table-column>
        <el-table-column
          prop="deviceNumber"
          show-overflow-tooltip
          label="班次"
        ></el-table-column>
        <!-- <el-table-column
          prop="deviceName"
          show-overflow-tooltip
          label="设备名称"
        ></el-table-column>
        <el-table-column
          prop="jobTitle"
          show-overflow-tooltip
          label="工序名称"
        ></el-table-column>
        <el-table-column
          prop="jobDeviceType"
          show-overflow-tooltip
          label="岗位名称"
        ></el-table-column>
        <el-table-column
          prop="jobDeviceTitle"
          show-overflow-tooltip
          label="岗位设备名称"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          show-overflow-tooltip
          label="修改日期"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="updateBy"
          show-overflow-tooltip
          label="修改人"
        ></el-table-column> -->

        <el-table-column
          prop="createTime"
          show-overflow-tooltip
          label="扫码录入时间"
          width="160"
        ></el-table-column>
        <!-- <el-table-column
          prop="createBy"
          show-overflow-tooltip
          label="创建人"
        ></el-table-column> -->
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="text-align: right"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 7, 10, 20]"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog :visible.sync="dialogFormVisible" title="新增" width="80%">
      <el-form
        size="small"
        style="width: 100%"
        label-width="120px"
        class="addForm"
        :model="form"
      >
        <el-form-item label="记录编号">
          <el-input
            style="width: 100%"
            v-model="form.recordNumber"
            placeholder="记录编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="工位">
          <el-input
            style="width: 100%"
            v-model="form.workstation"
            placeholder="工位"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员编号">
          <el-input
            style="width: 100%"
            v-model="form.personNumber"
            placeholder="人员编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员名称">
          <el-input
            style="width: 100%"
            v-model="form.personName"
            placeholder="人员名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input
            style="width: 100%"
            v-model="form.deviceNumber"
            placeholder="设备编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            style="width: 100%"
            v-model="form.deviceName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input
            style="width: 100%"
            v-model="form.jobTitle"
            placeholder="工序名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-input
            style="width: 100%"
            v-model="form.jobDeviceType"
            placeholder="岗位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位设备名称">
          <el-input
            style="width: 100%"
            v-model="form.jobDeviceTitle"
            placeholder="岗位设备名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="addNew">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editFormVisiable" title="修改" width="80%">
      <el-form
        size="small"
        style="width: 100%"
        label-width="100px"
        class="addForm"
        :model="editForm"
      >
        <el-form-item label="记录编号">
          <el-input
            style="width: 100%"
            v-model="editForm.recordNumber"
            placeholder="记录编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="工位">
          <el-input
            style="width: 100%"
            v-model="editForm.workstation"
            placeholder="工位"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员编号">
          <el-input
            style="width: 100%"
            v-model="editForm.personNumber"
            placeholder="人员编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员名称">
          <el-input
            style="width: 100%"
            v-model="editForm.personName"
            placeholder="人员名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input
            style="width: 100%"
            v-model="editForm.deviceNumber"
            placeholder="设备编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            style="width: 100%"
            v-model="editForm.deviceName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序名称">
          <el-input
            style="width: 100%"
            v-model="editForm.jobTitle"
            placeholder="工序名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-input
            style="width: 100%"
            v-model="editForm.jobDeviceType"
            placeholder="岗位名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位设备名称">
          <el-input
            style="width: 100%"
            v-model="editForm.jobDeviceTitle"
            placeholder="岗位设备名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editFormVisiable = false"
          >取 消</el-button
        >
        <el-button size="small" :plain="true" type="primary" @click="submitEdit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
import { Query, Addition, Modify, Delete } from "@/api/record";

export default {
  inject: ["reload"],
  data() {
    return {
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      total: 0, //总条数
      // 渲染表格数据
      tableData: [],
      materialInformation: [], //存入本地记录
      // 新增表单
      form: {},
      dialogFormVisible: false, //新增弹框
      editFormVisiable: false, //修改弹框
      edit: true, //编辑
      disabled: true, //删除
      // 修改表单
      editForm: {},
      // 初始查询表单
      formInline: {},
      multipleSelection: [], // 存储多选数据
    };
  },
  methods: {
    //查询列表
    query() {
      var data = {
        currentPage: this.currentPage,
        pageSize: 10,
        searchData: this.formInline,
      };
      Query(data)
        .then((res) => {
          console.log("记录管理查询列表成功", res);
          this.tableData = res.data.data.list;
          this.total = res.data.data.total; //数据总条数
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val; //当前页
      this.query();
    },
    // 查询
    onSubmit() {
      this.query();
    },
    //刷新
    reset() {
      this.reload();
    },
    // 分页显示
    changePage(obj) {
      console.log(obj);
      const n = (this.currentPage - 1) * this.pageSize; //需要跳过的条数
      this.tableData = obj.slice(n, n + this.pageSize);
    },
    // 增加
    addNew() {
      var data = this.form;
      Addition(data).then((res) => {
        console.log("记录管理新增列表成功", res);
        if (res.data.code == 200) {
          this.dialogFormVisible = false;
          this.query();
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    // 修改
    handleEdit(row) {
      this.editFormVisiable = true;
      // this.editForm = { ...row };
      this.editForm = this.multipleSelection[0];
    },
    // 确认修改
    submitEdit() {
      var data = this.editForm;
      Modify(data)
        .then((res) => {
          console.log("记录管理修改列表成功", res);
          if (res.data.code == 200) {
            this.editFormVisiable = false;
            this.query();
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            message: "修改失败",
            type: "success",
          });
        });
    },
    //多选删除
    deleteData() {
      this.$confirm(
        "此操作将永久删除 " +
          this.multipleSelection.length +
          " 个记录, 是否继续?",
        "提示",
        { type: "warning" }
      )
        .then(() => {
          var data = this.multipleSelection;
          Delete(data)
            .then((res) => {
              console.log("记录管理删除列表成功", res);
              this.dialogFormVisible = false;
              this.$message({
                message: "恭喜你，删除成功",
                type: "success",
              });
              this.query();
            })
            .catch((err) => {
              console.log(err);
              this.$message({
                message: "删除失败",
                type: "success",
              });
            });
        })
        .catch(() => {
          this.$message("已取消操作!");
        });
    },
    //选中行变色
    tableRowClassName({ row, rowIndex }) {
      let arr = this.multipleSelection.map((item) => item.recordId);
      for (let i = 0; i < arr.length; i++) {
        if (row.recordId === arr[i]) {
          return "rowStyle";
        }
      }
    },
    // 监听多选数据变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length == 0) {
        this.disabled = true;
        this.edit = true;
      } else if (this.multipleSelection.length == 1) {
        this.edit = false;
        this.disabled = false;
      } else {
        this.edit = true;
        this.disabled = false;
      }
    },
  },
  created() {
    this.query();
  },
};
</script>

<style lang="scss">
.home_table {
  height: 100%;
  border-radius: 10px;
  background-color: #587ab3;
  border: 0;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0px;
  } /* table选中高亮 */
  .rowStyle {
    color: rgb(28, 235, 211) !important;
    background: rgb(36 52 93) !important;
  }
  .el-table__body-wrapper {
    background-color: #445e89e6;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    // border: 0;
    border: 1px solid #587ab3;
  }
  .el-table::before {
    height: 0px;
  }
  /* 悬停划过高亮，鼠标经过，当前行的颜色 */
  .el-table__body tr:hover > td {
    background-color: rgb(36 52 93) !important;
    color: rgb(28, 235, 211);
  }
  .el-form-item--small .el-form-item__content,
  .el-form-item--small .el-form-item__label {
    color: white;
  }
  .addForm {
    .el-form-item--small .el-form-item__content,
    .el-form-item--small .el-form-item__label {
      color: black;
      padding: 4px;
    }
  }
  .el-card__header {
    border-bottom: 4px solid #364662;
  }
  .el-card__body,
  .el-main {
    padding: 0px;
  }
  .el-table--border,
  .el-table--group {
    border: 0px solid #ebeef5;
  }
  .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: white;
  }
  .el-pagination__jump {
    margin-left: 24px;
    font-weight: 400;
    color: white;
  }
}
.home_table .el-table__body tr:nth-child(even) {
  background-color: #3c5276;
  color: white;
}
.home_table .el-table__body tr:nth-child(odd) {
  background-color: #445e89;
  color: white;
}
</style>
